/**
 * 租户  下拉列表结构
 * by sunwanli
 * create 2021-08-26
 */
import React from 'react';
import { connect } from 'dva';
import PropTypes from 'prop-types';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Select, Tooltip } from 'antd';
import { FormItemLayout, NoLableLayout } from '../../form/formPub.js';
const { Option } = Select;

class TenantC extends React.PureComponent {
  // props默认值
  static defaultProps = {
    title: '租户',
    placeholder: '请选择租户',
    helper: '',
    onChange: () => {},
    onRef: () => {}, // 本组件的引用
    width: '100%',
    rules: undefined, // 默认无校验规则
    formItemLayout: FormItemLayout, // 设置表单默认布局
    allowClear: true, // 默认可删除
    disabled: false, // 默认不禁用
    multiple: false, // 默认单选
    maxTagCount: 0, // 默认多选时，最多选择1条
    toolTipPlace: 'top', // tooltip显示位置
    firstInit: false, // 是否显示默认参数--当设置成true时，默认定位到一个元素
    positionBody: false, //  下拉框，默认跟随，如果select父节点有滚动，下拉框被遮挡，则需要设置为true
  };

  constructor(props) {
    super(props);

    this.state = {
      fullTenants: undefined, // 租户全量数据
      dataSource: [],
      tooltipInfo: '', // 鼠标移动到组件，展示当前选中项全称
      isChange: false, //datasource是否改变
    };
  }

  componentDidMount() {
    // 父组件对本组件的引用
    this.props.onRef(this);

    // 调用接口，获取租户数据
    this.getTenantList((e) => {
      this.setState(
        {
          dataSource: e,
        },
        () => {
          if (this.props.firstInit) {
            const value = this.props.multiple ? [e[0].value] : e[0].value;
            this.setSelect(value);
          } else {
            // 若有初始化值，则设置tooltip
            if (this.props.initialValue != undefined && this.props.initialValue != null) {
              this.setTooltip(this.props.initialValue);
            }
          }
        },
      );
    });
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    // 处理当重置时，清空tooltip
    let value = nextProps.form.getFieldValue(nextProps.dataIndex);
    this.setTooltip(value);
    // 处理异步初始化设置tooltip
    const init = nextProps.isMultiple ? (this.props.initialValue && this.props.initialValue.length > 0 ? JSON.stringify(this.props.initialValue) : '') : this.props.initialValue;
    const initN = nextProps.isMultiple ? (nextProps.initialValue && nextProps.initialValue.length > 0 ? JSON.stringify(nextProps.initialValue) : '') : nextProps.initialValue;
    if (init != initN) {
      this.setTooltip(nextProps.initialValue, nextProps);
    }
  }

  // 设置tooltip
  setTooltip = (e, propT = this.props) => {
    if (this.state.fullTenants == undefined) return;

    let { multiple } = propT;
    let tooltipInfo = '';
    if (e != undefined && e != null) {
      if (Array.isArray(e) && multiple) {
        // 多选
        e.forEach((element, index) => {
          let find = this.state.fullTenants.filter((item) => item.value == element);
          if (find && find.length > 0) {
            tooltipInfo += find[0].title;
          }
          // 最后一个元素之后不用换行
          if (index != e.length - 1) {
            tooltipInfo += '\r\n';
          }
        });
      } else {
        // 单选
        let find = this.state.fullTenants.filter((item) => e == item.value);
        if (find && find.length > 0) {
          tooltipInfo += find[0].title;
        }
      }
    }
    this.setState({
      tooltipInfo: tooltipInfo == '' ? '' : <div style={{ whiteSpace: 'pre' }}>{tooltipInfo}</div>,
    });
  };

  // 调用接口，获取租户数据
  getTenantList = (callback) => {
    const { filterTenants } = this.props;
    this.props.dispatch({
      type: 'tenantM/getTenantList',
      payload: {},
      callback: (data) => {
        let temp = data;
        if (filterTenants) {
          //需要过滤掉得租户
          temp = data?.filter((item) => {
            return !filterTenants.includes(item.value);
          });
        }
        this.setState({
          fullTenants: [...temp],
        });
        callback(temp);
      },
    });
  };

  // 非初始化状态下更改下拉选项(供父组件调用)
  setSelect = (value) => {
    const valueF = {};
    valueF[this.props.dataIndex] = value;
    this.props.form.setFieldsValue(valueF);

    // 触发租户切换事件
    this.onChange(value);
    // 修改tooltip
    this.setTooltip(value);
  };

  // 模糊搜索
  onSearch = (e) => {
    if (this.state.fullTenants && this.state.fullTenants.length) {
      let ds = this.state.fullTenants.filter((item) => {
        if (item.title != null) {
          return item.title.indexOf(e) > -1;
        }
      });
      this.setState({
        dataSource: ds,
        isChange: true,
      });
    }
  };

  // 展开下拉回调
  onDropdownVisibleChange = (open) => {
    if (open) {
      this.setState({
        dataSource: this.state.fullTenants == undefined ? [] : this.state.fullTenants,
      });
    }
  };

  // 租户切换事件
  onChange = (e) => {
    // 多选模式
    if (this.props.multiple) {
      if (e && e.length) {
        let ds = [];
        e.forEach((element) => {
          let temp = this.state.fullTenants.filter((item) => {
            return item.value === element;
          });
          ds.push(temp && temp.length == 1 ? temp[0] : undefined);
        });
        // 对外抛出事件
        this.props.onChange({ key: e, info: ds });
      } else {
        // 对外抛出事件
        this.props.onChange(undefined);
      }
    } else {
      // 单选模式
      let ds = this.state.fullTenants.filter((item) => {
        return item.value === e;
      });
      // 对外抛出事件
      this.props.onChange(ds && ds.length === 1 ? { key: e, info: ds[0] } : undefined);
    }
    //处理模糊搜索后datasource变化，重置时无法匹配title
    if (this.state.isChange && this.props.initialValue) {
      this.setState({
        dataSource: this.state.fullTenants,
        isChange: false,
      });
    }
    // 修改tooltip
    this.setTooltip(e);
  };

  render() {
    const {
      styleRow,
      form,
      title,
      dataIndex,
      initialValue,
      placeholder,
      helper,
      width,
      rules,
      formItemLayout,
      allowClear,
      disabled,
      multiple,
      maxTagCount,
      toolTipPlace,
      positionBody,
    } = this.props;
    const { getFieldDecorator } = form;

    return (
      <Form.Item
        labelCol={title ? formItemLayout.labelCol : NoLableLayout.labelCol}
        wrapperCol={title ? formItemLayout.wrapperCol : NoLableLayout.wrapperCol}
        label={
          title ? (
            helper ? (
              <span>
                {title}&nbsp;
                <Tooltip title={helper}>
                  <QuestionCircleOutlined />
                </Tooltip>
              </span>
            ) : (
              <span>{title}</span>
            )
          ) : undefined
        }
      >
        <Tooltip title={this.state.tooltipInfo} placement={toolTipPlace}>
          {getFieldDecorator(dataIndex, {
            initialValue,
            rules: !!rules ? rules : [],
          })(
            <Select
              getPopupContainer={(triggerNode) => (!positionBody ? triggerNode.parentNode : document.body)}
              style={styleRow ? styleRow : { width: width }}
              placeholder={placeholder}
              onChange={this.onChange}
              allowClear={allowClear}
              filterOption={false}
              showSearch={true} // 使单选模式可搜索
              onSearch={this.onSearch} // 模糊搜索
              onDropdownVisibleChange={this.onDropdownVisibleChange}
              disabled={disabled}
              mode={multiple ? 'multiple' : undefined}
              maxTagCount={maxTagCount}
            >
              {this.state.fullTenants != undefined
                ? this.state.dataSource.length > 0
                  ? this.state.dataSource.map((item) => (
                      <Option value={item.value} key={item.value}>
                        {item.title}
                      </Option>
                    ))
                  : [
                      <Option key={'blank'} value={'blank'} disabled>
                        无匹配的结果
                      </Option>,
                    ]
                : [
                    <Option key={'blank'} value={'blank'} disabled>
                      正在加载中...
                    </Option>,
                  ]}
            </Select>,
          )}
        </Tooltip>
      </Form.Item>
    );
  }
}

// props类型
TenantC.propsTypes = {
  form: PropTypes.object, // form对象
  title: PropTypes.string, // 显示名称
  dataIndex: PropTypes.string, // Form识别的Item ID
  initialValue: PropTypes.string, // 初始默认值
  placeholder: PropTypes.string, // 占位符
  onChange: PropTypes.func, // 输入框内容变化时的回调
  helper: PropTypes.oneOfType([
    // 提示帮助信息
    PropTypes.string,
    PropTypes.element,
  ]),
  onRef: PropTypes.func, // 本组件的引用（可用来父组件调用内部方法）
  rules: PropTypes.object, // 校验规则
  formItemLayout: PropTypes.object, // 设置表单布局
  allowClear: PropTypes.bool, // 设置是否可删除
  disabled: PropTypes.bool, // 是否禁用
  multiple: PropTypes.bool, // 是否支持多选
  maxTagCount: PropTypes.number, // 多选时，做多显示多少条
  firstInit: PropTypes.bool, // 是否显示默认参数--当设置成true时，默认定位到一个元素
  positionBody: PropTypes.bool, //  下拉框默认跟随，如果select父节点有滚动，下拉框被遮挡，则需要设置为true
  filterTenants: PropTypes.array, //过滤掉不需要得租户，数组形式入参
};

export default connect(({ tenantM, loading }) => ({ tenantM, loading }))(TenantC);
